<div class="comp-step">
    <div class="step-title">
        <h2 class="step-title-main">{{ $tc('step.title', 1) }}</h2>
        <h3 class="step-title-second">{{ $tc('step.title', 2) }}</h3>
    </div>
    <section class="step-cont fn-flex-center">
        <a href="./register.html" class="s-item" :class="{'active': isActive==='signup'}" @mouseover="isActive='signup'" @mouseleave="isActive=''">
            <div class="s-item-icon">
                <span class="icon--inner icon-signup"></span>
                <i class="icon--arrow"></i>
            </div>
            <div class="s-item-text">
                <p class="text-title">{{ $t('step.textTitle1') }}</p>
                <p class="text-sub">{{ $t('step.textInfo1') }}</p>
            </div>
        </a>
        <div class="s-item" :class="{'active': isActive==='deposite'}" @mouseover="isActive='deposite'" @mouseleave="isActive=''">
            <div class="s-item-icon">
                <span class="icon--inner icon-deposite"></span>
                <i class="icon--arrow"></i>
            </div>
            <div class="s-item-text">
                <p class="text-title">{{ $t('step.textTitle2') }}</p>
                <p class="text-sub">{{ $t('step.textInfo2') }}</p>
            </div>
        </div>
        <div class="s-item" :class="{'active': isActive==='exchange'}" @mouseover="isActive='exchange'" @mouseleave="isActive=''">
            <div class="s-item-icon">
                <span class="icon--inner icon-exchange"></span>
                <i class="icon--arrow"></i>
            </div>
            <div class="s-item-text">
                <p class="text-title">{{ $t('step.textTitle3') }}</p>
                <p class="text-sub">{{ $t('step.textInfo3') }}</p>
            </div>
        </div>
        <div class="s-item" :class="{'active': isActive==='gain'}" @mouseover="isActive='gain'" @mouseleave="isActive=''">
            <div class="s-item-icon">
                <span class="icon--inner icon-gain"></span>
            </div>
            <div class="s-item-text">
                <p class="text-title">{{ $t('step.textTitle4') }}</p>
                <p class="text-sub">{{ $t('step.textInfo4') }}</p>
            </div>
        </div>
    </section>
</div>